<template>
  <div class="home-tool-bar home-tool-bar-large">
    <a class="item item-image"
      ><div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/98a23aae70f25798192693f21c4d4039.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/74c4fcb4475af8308e9a670db9c01fdf.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text"> 手机APP<!----></span>
       <div class="pop-content">
      <a>
        <img
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/78c30d4f259ed43ab20e810a522a6249.png"
        />
        <p class="desc">扫码领取新人百元礼包</p></a
      >
    </div>
    </a>
    <!---->
   
    <a class="item"
      ><div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/55cad219421bee03a801775e7309b920.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/41f858550f42eb1770b97faf219ae215.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text"> 个人中心<!----></span
      ><!----><!----></a
    ><a class="item"
      ><div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/12eb0965ab33dc8e05870911b90f3f13.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="https://cdn.cnbj1.fds.api.mi-img.com/mi-mall/95fbf0081a06eec7be4d35e277faeca0.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text"> 售后服务<!----></span
      ><!----><!----></a
    ><a class="item"
      ><div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/4f036ae4d45002b2a6fb6756cedebf02.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/5e9f2b1b0da09ac3b3961378284ef2d4.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text"> 人工客服<!----></span
      ><!----><!----></a
    ><a class="item"
      ><div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/d7db56d1d850113f016c95e289e36efa.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="https://i8.mifile.cn/b2c-mimall-media/692a6c3b0a93a24f74a29c0f9d68ec71.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text"> 购物车<!----></span
      ><!----><!----></a
    ><a href="javascript:void(0);" class="item backtop active" v-show="isFixed" @click="fanhui" style="margin-top:20px;">
      <div data-v-212c8a9d="" class="icon">
        <img
          data-v-212c8a9d=""
          src="//i1.mifile.cn/f/i/2018/home/totop.png"
          class="static"
        /><img
          data-v-212c8a9d=""
          src="//i1.mifile.cn/f/i/2018/home/totop_hover.png"
          class="hover"
        />
      </div>
      <span data-v-212c8a9d="" class="text">回顶部</span></a
    >
  </div>
</template>

<script>
export default {
  name: "RightFixed",

  data() {
    return {
      isFixed: false,
    };
  },

  mounted() {
    window.addEventListener("scroll", this.backTop);
  },

  methods: {
    backTop() {
      const top = document.documentElement.scrollTop;
      if (top > 220) {
        this.isFixed = true;
      } else {
        this.isFixed = false;
      }
    },
    fanhui(){
        window.scroll(0,0)
    }
  },
};
</script>

<style lang="scss" scoped>
.home-tool-bar {
  position: fixed;
  bottom: 70px;
  right: 0;
  z-index: 99;

  width: 84px;
}
a {
  position: relative;
  font-size: 14px;
  color:  #757575;;
  display: block;
  width: 82px;
  height: 90px;
  border: 1px solid #f5f5f5;
  margin-top: -1px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-around;

  text-align: center;

  img {
    position: absolute;
    left: 0;
    right: 0;
    margin: 0 auto;
    width: 30px;
    height: 30px;
  }
  &:hover {
    color: #ff6700;

    .hover {
      opacity: 1;
    }
    .pop-content {
      opacity: 1;
    }
  }
}
.hover,.pop-content {
  opacity: 0;
}
.pop-content {
  position: absolute;
  right: 100px;
  top: 0;
  width: 130px;

  height: 192px;

  padding: 14px;
  background: #fff;
  border: 1px solid #f5f5f5;

  transition: all 0.3s;
  text-align: center;
  //   transform: translateZ(0);
  &::after {
    content: "";

    /* 设置绝对定位 */
    position: absolute;
    width: 0;
    height: 0;
    /* 设置四个方向的边框 */
    border: 8px solid transparent;
    /* 去除上边框 */
    // border-top: none;
    /* 单独设置下边框的颜色 */
    border-left-color: rgb(255, 255, 255);

    top: 15px;

    right: -15px;
  }
  a {display: block;
    img {
      width: 100px;
      height: 100px;
      margin: 6px auto;
    }
    p {
      font-size: 14px;
      width: 82px;
      margin: 126px 0 0 9px;
      color: #757575;
    }
  }
}
</style>
